<template>
  <el-row class="login-container">

    <el-col :lg="16" :md="12" :xs="0" class="login-left-box">
      <div>
        <div class="login-left-title">欢迎光临</div>
        <div>这里是VITE的开发后台</div>
      </div>
    </el-col>

    <el-col :lg="8" :md="12" :xs="24" class="login-right-box">
      <div>
        <el-row type="flex" justify="center">
          <el-form
              :rules="rules"
              ref="formRef" :model="user" status-icon label-width="80px">
            <el-form-item prop="username" label="用户名">
              <el-input
                  v-model="user.username" placeholder="请输入用户名" clearable>
                <template #prefix>
                  <el-icon><User /></el-icon>
                </template>
              </el-input>

            </el-form-item>
            <el-form-item id="password" prop="password" label="密码">
              <el-input v-model="user.password" show-password clearable placeholder="请输入密码">

                <template #prefix>
                  <el-icon><Lock /></el-icon>
                </template>

              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-upload" class="w-[250px]" round @click="doLogin">登录</el-button>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import { User , Lock} from '@element-plus/icons-vue'
import {reactive, ref} from "vue";
// 引入api
import login from '~/api/manager.js'
import axios from "axios";

const formRef = ref(null) // 这里定义的数据需要绑定到 <el-form ref="formRef" 才可以使用

const user = reactive({
  username: "",
  password: "",
})

const doLogin = () => {
  formRef.value.validate((valid)=>{
    console.log("校验数据", valid)
    if (!valid) {
      console.log("校验失败,不提交请求")
      return false
    }
    console.log("校验成功,提交请求")
    // login(user.username, user.password).then(res=>{
    //   console.log('显示结果', res)
    // }).catch(err => {
    //   console.log('显示错误信息', err)
    // })

    axios.post('http://10.18.118.43:3002/admin/login',{
      username: user.username,
      password: user.password
    }).then(function (response) {
      console.log("显示请求结果", response)
      console.log("显示请求结果data=", response.data)
    }).catch(function (error) {
      console.log("显示请求错误", error)
    })


  })
}

// 定义规则
const rules = {
  username: [
    {
      required: true,
      message: "用户名不能为空",
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: "密码不能为空",
      trigger: 'blur'
    }
  ]
}
</script>


<style scoped>
/*这里使用widicss 进行布局显示
el-col 是自适应的会把整个屏幕分成24分,这里表示左右 16:8 的比例进行分配宽度
min-h-screen 这个表示内容全部占满,不加的话只有一行内容组左右分屏显示
items-center 这个表示内容的上下居中
justify-center 这个表示内容的左右居中显示

左边添加信息,使用div包起来
font-bold 表示字体加粗显示
text-5xl 这个表示字体加大5xl
text-light-50 这个表示字体颜色是白色

*/
.login-container {
  @apply min-h-screen bg-indigo-500;
}
.login-left-box {
  @apply flex items-center justify-center flex-col;
}
/*把公共部分放在一起*/
/*.login-left-box .login-right-box {*/
/*  @apply flex items-center justify-center flex-col;*/
/*}*/
.login-right-box {
  @apply  bg-light-50 flex items-center justify-center flex-col;
}
.login-left-title {
  @apply  font-bold text-5xl text-light-50;
}

</style>